$(()=>{
  // get dom elem
  let $width = $('#width'),
      $height = $('#height'),
      $btnCal = $('#calc'),
      $perimeter = $('#perimeter'),
      $widthVal = $('#width-validate'),
      $heightVal = $('#height-validate'),
      $form = $('#main'),
      $area = $('#area');



     $forkMeGH.show("https://www.baidu.com/"),


  // 字符校验（keyPress,or keyDown,or keyUp）
  // 需要获得用户的按键信息
  // e.key(当前的按键)   e.target(文本框)   e.target.value(文本框原有的值)
  // 注意合法字符（0~9 . - e E）和非法字符（a~z,A~Z,+-*/）;要过滤非法字符：e.preventDefault;合法字符也有规则 
  $width.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;  //按键发生的位置

    
    //各种规则分开写
    if(!isLegalKey(key,val,pos)){
      e.preventDefault();
    }


    /*
    // 将所有规则整合成一个字符表达式
    val = val.slice(0,pos) + key + val.slice(pos,val.length);
    if(!/^(0|[1-9]\d*)(\.\d+)?((e|E)(\+|-)?\d+)?$/.test(val)) e.preventDefault();
    */
    
  });
  
  $height.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;
    if(!isLegalKey(key,val,pos)){
      e.preventDefault();
    }
    
  });


  /*
   **字段级校验（调用focusout事件）
  // 字段较多时，利用冒泡在容器上定义事件
  $form.focusout((e)=>{
    console.log(e.target);
  })
  */
  // 字段比较少时
  $width.focusout(()=>{
    if(!validate($width,$widthVal)){
      $width.select();   // 保证如果不合法的话，选中非法的内容
    }
  });
  $height.focusout(()=>{
    if(!validate($height,$heightVal)){
      $height.select();
    }
  });
  
  
  /* calc button click */
  $btnCal.click(()=>{
    // get value
    let w = Number($width.val()),
        h = Number($height.val());

    // 集中（表单）校验 validate
    if(validate($width,$widthVal) && validate($height,$heightVal)){
      //calc
      let p = roundFractional(((w+h)*2),3),
          a = roundFractional((w*h),3);

      //output
      $perimeter.val(p);
      $area.val(a);
    }
  });
});


function roundFractional(x, n) {
  return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}


function validate(input,output){
  // is empty
  if(input.val() === ''){
    output.html('该字段不能为空');
    return false;
  } else{
    output.html('');
    
  }

  // is number
  let val = Number(input.val());

  if(isNaN(val)){
    output.html('该字段应是数值');
    return false;
  } else{
    output.html('');
  }

  // is +
  if(val <0 ){
    output.html('该数值不能小于0');
    return false;
  }else{
    output.html('');
  }
   
  return true;

}

function isLegalKey(key,content,pos){
  // 过滤非法字符
  if(/[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(key)){
    return false;
  }
  
  // 合法字符：. (小数点)
  if(key === '.'){
    // 规则小数点不能出现在数字的首位
    if(pos===0) return false;

    // 规则：小数点不能出现在小数中
    if(content.indexOf('.') !== -1) return false;

    // 规则：小数点不能出现在负号以及 e 或 E 后面
    if(pos > 0 && /[-eE]/.test(content.slice(0, pos))) return false; 
  }
  
  // 合法字符：e和E科学计数法指数符号
  if(key === 'e' || key === 'E') {
    // 规则：e 和 E 不能出现在数字的首位
    if(pos === 0) return false;

    // 规则：e 和 E 不能出现在科学计数法的数字中
    if(content.indexOf('e') !== -1 || content.indexOf('E') !== -1) return false;

    // 规则：e 和 E 不能出现在负号和小数点后面
    if(pos > 0 && /[-.]/.test(content.slice(pos - 1, pos))) return false;

    // 规则：e 和 E 不能出现在小数点前面
    if(content.slice(pos, content.length).indexOf('.') !== -1) return false;
  } 

  // 合法字符：- 负号
  if(key === '-') {
    // 规则：负号不能出现在数字的首位
    if(pos === 0) return false;

    // 规则：负号不能出现在数字和小数点后面
    if(pos > 0 && /[0-9.]/.test(content.slice(pos -1, pos))) return false;

    // 规则：负号不能重复出现
    if(pos > 0 && content.indexOf('-') !== -1) return false;
  }

  return true;
  
}
